<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <base href="{$BASE_URL}" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

  <!-- <script>
  (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  </script> -->

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    *,
    *:before,
    *:after {
      max-height: 100000px
    }

    body {
      /* padding: .48rem .4rem; */
      padding: 24px 20px;
      font-family: PingFangSC-Regular;
      background: #fff;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    h1 {
      /* font-size: .6rem; */
      font-size: 30px;
      margin-bottom: 28px;
      /* margin-bottom: .55rem; */
      font-weight: normal;
    }

    .tip {
      color: #8F8F92;
      font-size: 12px;
      /* font-size: .24rem; */
    }

    .wzd_list {
      list-style: none;
    }

    .wzd_list li {
      margin-top: 14px;
      /* margin-top: .27rem; */
      border-top: 1px solid #E3E3E3;
      /* padding: .25rem 0 .08rem; */
      padding: 12px 0 4px;

    }

    .grey {
      color: #BFBFC0;
    }

    .question {
      font-size: 14px;
      /* font-size: .28rem; */
    }

    .answers {
      display: flex;
      flex-wrap: wrap;
    }

    .answer {
      width: 50%;
      /* font-size: .28rem; */
      font-size: 14px;
      display: flex;
    }
    input {
      -webkit-appearance: none;
      width: 15px;
      /* width: .3rem; */
      /* height:  .3rem; */
      height: 15px;
      border: 1px solid #BFBFC0;
      margin: .2rem .2rem 0 0;
      margin: 10px 10px 0 0;
      outline: none;
      border-radius: 0;
    }
    input:checked {
      background:url();
      background-size: contain;
      border: 0 none;
    }
    input[type='radio'] {
      border-radius: 50%
    }
    input[type='radio']:checked {
      
      background-size: contain;
      border: 0 none;
     
    }
    label {
      padding: 8px 0;
      /* padding: .15rem 0; */
      flex: 1;
      line-height: 20px;
      /* line-height: 40px; */
    }

  </style>
</head>

<body>
  <h1 id="title">问诊单</h1>
  <p class="tip">温馨提示：急性病以当下状况为准，慢性病以近3天为准，请认真填写以便医生准确诊疗</p>
  <ul class="wzd_list">
  </ul>
</body>

</html>
<script>
  var gender = location.search.slice(location.search.lastIndexOf('=') + 1);
  var url = ''
  if (gender === 'male' || gender === 'female') {
    url = "/weixin/ajax/survey/tmpl/" + gender
  } else {
    url = "/weixin/ajax/survey/" + gender
  }

  axios.get(url).then(function (res) {
    document.title = res.data.data.title;
    document.getElementById('title').innerText = res.data.data.title
    var list = res.data.data.subjects;
    var ul = document.querySelector('.wzd_list');
    var docfrag = document.createDocumentFragment();
    for (var i = 0; i < list.length; i++) {
      
      var li = document.createElement("li");
      var p = document.createElement("p");
      p.className = "question"
      p.textContent = (i + 1) + "." + list[i].label;
      var span = document.createElement("span");
      span.className = "grey";
      span.textContent = "(" + (list[i].type === 1 ? '单选' : '可多选') + ")";
      p.appendChild(span)
      li.appendChild(p)
      var answers = document.createElement("div");
      answers.className = "answers";
      for (var j = 0; j < list[i].options.length; j++) {
        var answer = document.createElement("div");
        answer.className = ('answer')
        var input = document.createElement("input");
        input.className = "select-box-hidden";
        input.name = list[i].label;
        input.value = list[i].options[j];
        input.id = list[i].options[j];
        input.disabled = true;
        if (list[i].type === 1) {
          input.type = 'radio'
          if (list[i].hasOwnProperty('values')) {
            if (list[i].values === list[i].options[j]) {
              input.checked = true;
            }
          }
        } else {
          input.type = 'checkbox'
          if (list[i].hasOwnProperty('values')) {
            for (var k = 0; k < list[i].values.length; k++) {
              if (list[i].values[k] === list[i].options[j]) {
                input.checked = true;
              }
            }
          }
        }
        answer.appendChild(input)
        var label = document.createElement('label');
        label.htmlFor = list[i].options[j];
        label.textContent = list[i].options[j];
        answer.appendChild(label)
        answers.appendChild(answer)
        li.appendChild(answers)
      }
      docfrag.appendChild(li);
    }
    ul.appendChild(docfrag)

  })
</script>